<template>
  <div>
      <p>歌曲详情-{{$route.params.name}}</p>
      <p>商品名称：{{name}}</p>
      <router-link to="/detail/最伟大的作品">最伟大的作品</router-link>
      <!-- 问题产生的原因：页面跳转前后的组件是相同的，没必要先销毁再创建 -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: ''
        }
    },
    // 动态路由 获取参数 $route.params
    // ？传参 适用于所有页面 获取参数 $route.query 查询参数
    created() {
        this.name = this.$route.params.name;
        return
        this.http.get('/getInfoById?id='+this.$route.params.id)
        .then(res => {
            this.name = res.name
        })
    },
    watch: {
        $route(v1, v2) {
            // xxxx
        }
    },
    // 检测路由的变化 执行一些代码
    beforeRouteUpdate(to, from, next) {
        this.name = to.params.name;
        // this.http.get('/getInfoById?id='+this.$route.params.id)
        // .then(res => {
        //     this.name = res.name
        // })
        next()
    }
}
</script>

<style>

</style>